import React, { memo, useState } from "react";
import classNames from "classnames";

import { singerAlphas } from "@/utils/handle-data";

import { AlphaListWrapper } from "./style";
export default memo(function HYAlphaList() {
  const [currentAlpha, setCurrentAlpha] = useState("热门");

  // map 方法会给原数组中的每个元素都按顺序调用一次  callback 函数
  return (
    <AlphaListWrapper>
      {singerAlphas.map((item, index) => {
        if (item === "0") item = "其他";
        if (item === "-1") item = "热门";
        const isActive = currentAlpha === item;

        return (
          <div key={item} className={classNames("item", { active: isActive })}>
            <a
              href="#/discover/artist/cat"
              onClick={(e) => setCurrentAlpha(item)}
            >
              {item.toUpperCase()}
            </a>
          </div>
        );
      })}
    </AlphaListWrapper>
  );
});
